<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, watch } from 'vue';
  import * as echarts from 'echarts/core';

  const props = defineProps({
    data: { type: Array as () => number[], required: true },
    yAxisData: { type: Array as () => string[], required: true },
    title: { type: String, default: '板形曲线' },
    min: { type: Number, default: -20 },
    max: { type: Number, default: 20 },
  });

  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;

  const option = ref<any>({
    title: {
      text: props.title,
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params: any) {
        const data = params[0];
        return `${data.name}: ${data.value.toFixed(2)}`;
      },
    },
    grid: {
      height: '70%',
      top: '15%',
      left: '15%',
      right: '10%',
      bottom: '15%',
    },
    xAxis: {
      type: 'value',
      min: props.min,
      max: props.max,
      splitLine: { show: true, lineStyle: { color: '#e0e0e0' } },
      axisLine: { lineStyle: { color: '#666' } },
      axisTick: { show: false },
      axisLabel: { color: '#333' },
    },
    yAxis: {
      type: 'category',
      data: props.yAxisData,
      splitLine: { show: false },
      axisLine: { lineStyle: { color: '#666' } },
      axisTick: { show: false },
      axisLabel: { color: '#333' },
    },
    series: [
      {
        name: '板形曲线',
        type: 'line',
        data: [],
        lineStyle: {
          color: '#ff0000',
          width: 2,
        },
        itemStyle: {
          color: '#ff0000',
        },
        symbol: 'circle',
        symbolSize: 4,
        smooth: false,
      },
    ],
  });

  const initCharts = () => {
    try {
      option.value.series[0].data = props.data;
      option.value.yAxis.data = props.yAxisData;
      option.value.title.text = props.title;
      option.value.xAxis.min = props.min;
      option.value.xAxis.max = props.max;

      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance?.setOption(option.value, true);
      }
    } catch (error) {
      console.error('板形曲线图初始化失败:', error);
    }
  };

  const updateChart = () => {
    option.value.series[0].data = props.data;
    option.value.yAxis.data = props.yAxisData;
    option.value.title.text = props.title;
    option.value.xAxis.min = props.min;
    option.value.xAxis.max = props.max;

    chartInstance?.setOption(option.value, true);
    chartInstance?.resize();
  };

  onMounted(() => {
    setTimeout(() => {
      initCharts();
    }, 100);

    window.addEventListener('resize', () => chartInstance?.resize());
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateChart);
    chartInstance?.dispose();
  });

  watch(
    () => [props.data, props.yAxisData],
    () => updateChart(),
    { deep: true }
  );

  defineExpose({
    updateChart,
    chartRef,
  });
</script>

<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>
